
import upload from '../../utils/upload';
const form = document.forms.avatar;
// const view = document.getElementById('view');
const progressBar  = document.getElementById('progressBar')

// form.avatar.onchange = function(){
//     //谷歌浏览器判断有无选择到图片
//     if(this.files.length > 0){
//         //选择了
//         view.src = URL.createObjectURL(this.files[0])
//     }else{
//         //没有选择
//         // view.src = '',
//     }
// }

//formData对象
form.onsubmit =  function(e){
    e.preventDefault();

    const fd = new FormData(form)

    //发送ajax请求且监控进度
    const xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200 ){
                console.log(xhr.response);
            }else{
                    alert('服务器错误'+xhr.status);
            }
        }
    }
    xhr.upload.onprogress = function(e){
        if(e.lengthComputable){
            const p =e.loaded / e.total * 100 +'%';
            progressBar.style.width = p;
        }
    }

    xhr.open('post','/api/upload',true)
     //设置请求头 //读取token，添加token到请求头中
     xhr.setRequestHeader('Authorization','Bearer '+ localStorage.getItem('token'))
    xhr.send(fd)
    
     //建立formData对象
    // const fd1 = new FormData();
    //在建立formdata对象时，它可以自动获取表单数据

    // 新增方法：append，set； 新增数据
    // fd1.append('uid','胡图图');
    // fd1.append('uid','章鱼哥');
    // fd1.set('pwd','123456');
    // fd1.set('pwd','7890');

    // 删除方法：delete
    // fd1.delete('uid')
      
    //获取方法：get；获取数据
    // fd1.get('pwd')

      //获取方法：getAll；获取数据返回数组
    // fd1.getAll('pwd')

    //判断有没有某某字段
    // fd1.has('uid')//true
    // fd1.has('uid2')//false

  
    
}